<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <el-text class="header-text">抢点班作业后台管理</el-text>
        <el-button class="header-button" type="primary" text style="float: right;" @click="logout">退出登录</el-button>
      </el-header>
      <el-main class="main">
        <div class="main-title">
          <div class="main-title-text" style="float: left;">
            编辑作业
          </div>
          <div>
            <el-button class="main-button" @click="back">返回上一页</el-button>
          </div>
        </div>
        <div class="main-back">
          <el-form :model="form" label-width="auto" style="max-width: 700px" size="large">
            <el-form-item label="作业名称">
              <el-input v-model="form.Name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="提交时间" style="width: 70%">
              <el-date-picker v-model="form.picker" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item label="作业归属">
              <el-select v-model="form.ClubType" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="关联文章">
              <el-autocomplete v-model="articleTitle" :fetch-suggestions="queryArticleList" placeholder="请输入"
                @select="handleSelectArticle" clearable />
            </el-form-item>
            <el-form-item label="关联直播">
              <el-select v-model="form.LiveId" placeholder="请选择" style="width: 100%" clearable
                @change="handleLiveChange">
                <el-option v-for="item in live" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="选择类型">
              <div>
                <el-button type="primary" @click="addSingleChoice">添加单选</el-button>
                <el-button type="primary" @click="addMultipleChoice">添加多选</el-button>
                <el-button type="primary" @click="addBlank">添加单选填空</el-button>
              </div>
            </el-form-item>
            <div class="question-container" v-for="(question, index) in questions" :key="index"
              :class="{ 'bg-change': isHovered[index] }" @mouseenter="handleMouseEnter(index)"
              @mouseleave="handleMouseLeave(index)">
              <div class="question-title">
                {{ questionPrefix(index) }} {{ getQuestionTypeText(question.type) }}
              </div>
              <div style="width: 600px;">
                <el-input v-model="question.description" />
              </div>
              <div class="add" v-if="question.type !== 'blank'">
                <div class="question-option">
                  <span>设置选项:</span>
                  <el-button type="primary" text @click="addOption(index)">添加</el-button>
                </div>
                <div v-for="(option, optionIndex) in question.content" :key="optionIndex">
                  <div class="select" style="display: flex;">
                    <div class="selection-item" style="display: flex;">
                      <div style="width: 550px;">
                        <el-input v-model="question.content[optionIndex].text" />
                      </div>
                      <div>
                        <el-button type="primary" text @click="removeOption(index, optionIndex)">删除</el-button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="delete" style="margin-left: 50px;">
                  <el-button type="info" plain @click="removeQuestion(index)">删除</el-button>
                </div>
              </div>
            </div>
            <div class="submit">
              <el-button type="primary" :disabled="!form.Name || !form.picker" @click="onSubmit">确认</el-button>
            </div>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>

</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import AddWorkApi from '../api/AddWorkApi';
import _ from 'lodash';
import dayjs from 'dayjs';
import ClassListApi from '../api/ClassListApi';
import { ElMessage } from 'element-plus';
import LoginApi from '../api/LoginApi';

import { useTokenStore } from '../stores/token';
import { useUserStore } from '../stores/user';

const router = useRouter();
const options = ref([
  { id: 1, name: '牧民俱乐部' },
  { id: 2, name: '博古论坛' },
  { id: 3, name: '神枪手俱乐部' },
  { id: 4, name: '环球俱乐部' },
  { id: 5, name: '价值投资' },
  { id: 6, name: '波段行情' },
  { id: 7, name: '抄底卖顶' },
  { id: 8, name: '资金及仓位管理' },
  { id: 9, name: '财富的游戏' },
]);

const route = useRoute();
const id = ref(route.params.id)
console.log(id.value + '============')

// 用于存储获取到的作业数据
const homeworkData = ref<{
  name: string;
  startDate: string;
  endDate: string;
  clubType: string;
  article: {
    id: string;
    title: string;
  };
  live: {
    id: string;
    name: string;
  };
  status: number;
  form: FormItemType[];

}>({
  name: '',
  startDate: '',
  endDate: '',
  clubType: '',
  article: {
    id: '',
    title: '',
  },
  live: {
    id: '',
    name: ''
  },
  status: 0,
  form: []
});

// 定义form数组中每个元素的类型接口
interface FormItemType {
  id: number;
  type: number;
  description: string;
  content: string; // 这里先定义为string，因为从数据看是JSON字符串格式，后续需要解析
  groupId: number;
  name: string;
  sort: number;
  status: number;
  createdAt: string;
  updatedAt: string;
}


const form = ref({
  id: '',
  Name: '',
  ClubType: '',
  ArticleId: '',
  LiveId: '',
  picker: [],
  StartDate: '',
  EndDate: '',
  Questions: []
});

// 新增一个变量用于标识是否发布，这里先设为false表示未发布
const isPublished = ref(0);
onMounted(async () => {
  try {
    const response = await ClassListApi.getClassListOne(id.value);
    homeworkData.value = response.data;
    console.log(homeworkData.value)
    form.value.Name = homeworkData.value.name;
    // 根据后端返回数据设置发布状态变量的值
    isPublished.value = homeworkData.value.status;

    const start = dayjs(homeworkData.value.startDate).format('YYYY-MM-DD');
    const end = dayjs(homeworkData.value.endDate).format('YYYY-MM-DD');
    form.value.picker = [start, end];

    if (homeworkData.value.article && homeworkData.value.article.title) {
      articleTitle.value = homeworkData.value.article.title;
    } else if (homeworkData.value.live && homeworkData.value.live.name) {
      form.value.LiveId = homeworkData.value.live.name;
    }
    form.value.ClubType = homeworkData.value.clubType;
    const processFormData = () => {
      const newQuestions = [];
      homeworkData.value.form.forEach((formItem: FormItemType) => {
        // 解析content字段中的JSON字符串为实际的数组对象
        const contentArray = JSON.parse(formItem.content) as { id: string, text: string }[];
        // 创建一个新的符合questions结构的对象
        const question = {
          id: formItem.id,
          type: formItem.type,
          description: formItem.description,
          content: contentArray,
          groupId: formItem.groupId,
          name: formItem.name,
          sort: formItem.sort,
          status: formItem.status,
          createdAt: formItem.createdAt,
          updatedAt: formItem.updatedAt,
        };
        newQuestions.push(question);
      });
      return newQuestions;
    };
    questions.value = processFormData();
  } catch (error) {
    console.error('接口请求出现错误:', error);
  }
});


const articleTitle = ref('');
// 问题列表数据
const questions = ref([]);
const onSubmit = () => {
  // 从picker中获取日期数据并进行格式转换
  if (form.value.picker && form.value.picker.length === 2) {
    const startDate = dayjs(form.value.picker[0]).format('YYYY-MM-DD HH:mm:00');
    const endDate = dayjs(form.value.picker[1]).format('YYYY-MM-DD HH:mm:00');
    form.value.StartDate = startDate;
    form.value.EndDate = endDate;
  }
  form.value.Questions = questions.value;
  if (form.value.LiveId) {
    // 如果form.value.liveid有值，优先使用liveid，清空ArticleId（假设后端不接受同时传这两个值且以liveid为准，可根据实际情况调整）
    form.value.ArticleId = '';
  } else if (form.value.ArticleId) {
    // 如果手动选择了关联文章，使用手动选择后更新的文章id（form.value.ArticleId）
  } else if (homeworkData.value.article && homeworkData.value.article.id) {
    // 如果没有手动选择，使用后端传回的数据中的关联文章id（homeworkData.value.article.id）
    form.value.ArticleId = homeworkData.value.article.id;
  }
  if (typeof id.value === 'string') {
    form.value.id = id.value;
  }
  ClassListApi.editWork(form.value)
    .then((response) => {
      console.log(response);
      ElMessage.success('编辑成功');
      router.push('/list')
    })
    .catch((error) => {
      console.error('编辑失败', error);
      ElMessage.error('编辑失败');
    });
  console.log(id.value + '--------------')
  console.log(form.value)
}
const back = () => {
  window.history.back()
}

// 存储根据文章输入内容查询到的关联文章结果列表
const articleSearchResults = ref([]);
// 根据文章输入内容查询关联文章的函数
const queryArticleList = async (queryString: string) => {
  if (form.value.LiveId) {
    ElMessage.warning('您已关联直播，暂无法关联文章');
    articleTitle.value = ''; // 清空文章标题输入框
    form.value.LiveId = '';
    return [];
  }
  try {
    const response = await AddWorkApi.getArticleList(queryString);
    const formattedResults = response.data.map(article => ({
      value: article.title,
      label: article.id
    }));
    articleSearchResults.value = formattedResults;
    return formattedResults;
  } catch (error) {
    console.error('查询关联文章失败', error);
    return [];
  }
};
const handleLiveChange = () => {
  if (form.value.ArticleId) {
    ElMessage.warning('您已关联文章，暂无法关联直播');
    form.value.LiveId = ''; // 清空关联直播选择框的值
    form.value.ArticleId = '';
    articleTitle.value = '';
  }
};
// 处理选择文章的函数
const handleSelectArticle = (article: { label: string }) => {
  // 这里可以根据业务需求，比如将选中的文章id（article.label）传递给其他地方使用等
  console.log('选中的文章id', article.label);
  form.value.ArticleId = article.label; // 将选中文章的id赋值给对应表单字段，用于传递给后端
  const selectedArticle = articleSearchResults.value.find(a => a.label === article.label);
  if (selectedArticle) {
    articleTitle.value = selectedArticle.value; // 更新显示的文章题目
  }
};

//获取直播列表
const live = ref([]);
function getLive() {
  AddWorkApi.getLiveList()
    .then(res => {
      live.value = res.data;
      console.log(live.value);
    })
    .catch(error => {
      console.error('获取直播列表失败', error)
    })
}
getLive();

// 根据类型获取对应的题目类型文本显示
const getQuestionTypeText = (type) => {
  switch (type) {
    case 1:
      return '作业题目(单选)';
    case 2:
      return '作业题目(多选)';
    case 3:
      return '作业题目(简答题)';
    default:
      return '未知类型题目';
  }
};

const addSingleChoice = () => {
  if (isPublished.value === 1) {
    ElMessage.warning('处于发布中，不能添加新题目');
  } else {
    questions.value.push({
      type: 1,  // 假设1代表单选，和后端格式对应起来
      description: '',
      content: [{ "id": "", "text": "" }, { "id": "", "text": "" }]
    });
  }

};

const addMultipleChoice = () => {
  if (isPublished.value === 1) {
    ElMessage.warning('处于发布中，不能添加新题目');
  } else {
    questions.value.push({
      type: 2,  // 假设2代表多选，和后端格式对应起来
      description: '',
      content: [{ "id": "", "text": "" }, { "id": "", "text": "" }]
    });
  }

};

const addBlank = () => {
  if (isPublished.value === 1) {
    ElMessage.warning('处于发布中，不能添加新题目');
  } else {
    questions.value.push({
      type: 3,  // 假设3代表简答题，和后端格式对应起来
      description: '',
      content: [{ "id": "", "text": "" }]
    });
  }
};

const addOption = (questionIndex) => {
  const currentQuestion = questions.value[questionIndex];
  // 如果当前题目没有content属性，则初始化一个空数组
  if (!currentQuestion.content) {
    currentQuestion.content = [];
  }
  currentQuestion.content.push({ id: "", text: "" });
};
const removeOption = (questionIndex, optionIndex) => {
  const currentQuestion = questions.value[questionIndex];
  currentQuestion.content.splice(optionIndex, 1);
};

const removeQuestion = (questionIndex) => {
  if(isPublished.value === 1){
    ElMessage.warning('处于发布中，不能删除题目');
  }else{
    questions.value.splice(questionIndex, 1);
  }
};

// 计算属性，用于生成序号前缀
const questionPrefix = computed(() => {
  return (index) => {
    return `${index + 1}、`;
  };
})

// 用于存储每个问题标题是否被鼠标悬停的状态，初始化为false
const isHovered = ref(Array(questions.value.length).fill(false));
const handleMouseEnter = (index) => {
  isHovered.value[index] = true;
};

const handleMouseLeave = (index) => {
  isHovered.value[index] = false;
};

// 在组件挂载后初始化 `isHovered` 数组长度与 `questions` 数组长度一致
onMounted(() => {
  isHovered.value = Array(questions.value.length).fill(false);
});


//退出
function logout() {
  //清除登录信息
  const tokenStore = useTokenStore();
  const userStore = useUserStore();
  tokenStore.clear();
  userStore.clear();
  LoginApi.logout().then(res => {
    console.log(res)
  })
  router.push('/')
}
</script>

<style scoped>
.submit {
  margin: 100px 212px;
}

.submit .el-button {
  padding: 25px 150px;
}

.question-title {
  transition: background-color 0.3s ease;
}

.bg-change {
  background-color: rgba(200, 200, 200, 0.3);
}

.question-title {
  margin-bottom: 10px;
}

.select {
  margin: 10px 0px 0px;
}

.delete {
  position: absolute;
  right: 10px;
  bottom: 0px;
}

.add {
  position: relative;
}

.question-container {
  margin: 20px 0;
  padding: 10px 20px;
  width: 750px;
  border-bottom: 1px solid #e5e5e5;
}

.header {
  height: 100px;
  line-height: 100px;
  padding: 0 80px;
}

.header-text {
  font-size: 22px;
  font-weight: 500;
  color: black;
  float: left;
}

.header-button {
  margin-top: 30px;
}

.main {
  padding: 30px 212px;
  background-color: #F8F8F8;
}

.main-title {
  font-size: 16px;
  background-color: white;
  font-weight: bold;
  height: 60px;
  border-bottom: 2px solid #ececec;
  padding: 0 15px;
  line-height: 52px;
}

.main-button {
  margin: 10px 15px 0 0;
  padding: 12px 20px;
  height: 40px;
  float: right;
}

.el-form {
  padding: 30px 78.5px;
  margin: auto;
}

.el-form-item {
  --font-size: 16px;
  margin: 0 0 25px;
}

.main-back {
  background-color: white;
}
</style>